<template>
  <div class="cityBureauOpinion">
    <el-form :inline="true" label-position="right" :model="form" label-width="130px">
      <div class="maintitle">合格证基本信息</div>
      <div class="titleDeputy">项目名称：{{ form.projectName }}</div>
      <div class="formcontent">
        <el-form-item label="合格证号">
          <span>渝耕字[</span>
          <el-input
            type="number"
            size="mini"
            :disabled="disabled"
            v-model="form.number"
            style="width:70px;"
          ></el-input>
          <span>]</span>
          <el-input
            type="number"
            size="mini"
            :disabled="disabled"
            v-model="form.certificateNumber"
            style="width:70px;"
          ></el-input>
          <span>号</span>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="项目实施单位">
          <el-input :disabled="disabled" v-model="form.implementUnit" style="width:200px;"></el-input>
        </el-form-item>
        <el-form-item label="资金来源">
          <el-input :disabled="disabled" v-model="form.sourcesFunds" style="width:200px;"></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="补充耕地位置图幅号">
          <el-input
            :disabled="disabled"
            style="width:774px;"
            :rows="6"
            type="textarea"
            v-model="form.frameMap"
          ></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="项目实施规模">
          <el-input
            type="number"
            :disabled="disabled"
            v-model="form.longitudeLatitude"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="新增耕地数量">
          <el-input
            type="number"
            :disabled="disabled"
            v-model="form.constructionScale"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="新增耕地等级">
          <el-input type="number" :disabled="disabled" v-model="form.plowArea" style="width:200px;"></el-input>
        </el-form-item>
        <el-form-item label="新增水田面积">
          <el-input
            type="number"
            :disabled="disabled"
            v-model="form.newPlowLevelOne"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="垦造水田面积">
          <el-input
            type="number"
            :disabled="disabled"
            v-model="form.newPlowLevelOneHectare"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
        <el-form-item label="旱改水田面积">
          <el-input
            type="number"
            :disabled="disabled"
            v-model="form.newPlowLevelTwo"
            style="width:200px;"
          >
            <i slot="suffix">公顷</i>
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="新增粮食产能">
          <el-input
            type="number"
            :disabled="disabled"
            v-model="form.newPlowLevelTwoHectare"
            style="width:200px;"
          >
            <i slot="suffix">公斤</i>
          </el-input>
        </el-form-item>
        <el-form-item label="新增耕地粮食产能">
          <el-input
            type="number"
            :disabled="disabled"
            v-model="form.newPlowLevelThree"
            style="width:200px;"
          >
            <i slot="suffix">公斤</i>
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="提质改造粮食产能">
          <el-input
            type="number"
            :disabled="disabled"
            v-model="form.newPlowLevelThreeHectare"
            style="width:200px;"
          >
            <i slot="suffix">公斤</i>
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="简介">
          <el-input
            :disabled="disabled"
            style="width:774px;"
            :rows="6"
            type="textarea"
            v-model="form.explanation"
          ></el-input>
        </el-form-item>
      </div>
      <div style="margin-top:40px;">
        <el-form-item>
          <el-button :disabled="disabled" @click="setDownload" type="primary">生成合格证</el-button>
        </el-form-item>
      </div>
      <div class="maintitle" style="margin-top:60px;">附件信息</div>
      <div class="formcontent">
        <el-form-item label-width="112px" label="开发整理合格证">
          <el-upload
            v-if="!disabled"
            :action="uploadUrl"
            :file-list="fileList[0]"
            :on-success="handleUploadSuccess"
          >
            <el-button v-if="!disabled" size="small" type="primary">上传</el-button>
          </el-upload>
          <seeFujianForList
            v-if="disabled"
            @openPdf="seePdf"
            :file-obj="fileList[0]"
            :file-num="0"
          />
        </el-form-item>
      </div>
      <div style="margin-top:40px;">
        <el-form-item>
          <el-button @click="onSubmit" v-if="!disabled" type="primary">提交</el-button>
          <el-button @click="back">返回</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import config from "@/config/index.js";
import seeFujianForList from "@/components/seeFujianForList";
import {
  setDownload,
  getDetail,
  setAdd
} from "@/api/completionAcceptance/cityBureauCertificate.js";
import { getFile } from "@/api/common";
export default {
  components: {
    seeFujianForList
  },
  data() {
    return {
      fileList: [],
      form: {
        projectName: "", // 项目名称
        projectId: localStorage.getItem("projectId"),
        unitId: "", // 开发整理合格证附件ID
        implementUnit: "", // 项目实施单位
        sourcesFunds: "", // 资金来源
        number: "", // 合格证号-年份
        certificateNumber: "", // 合格证号-号
        frameMap: "", // 补充耕地面积图幅号
        longitudeLatitude: "", // 项目实施规模(公顷)
        constructionScale: "", // 新增耕地数量
        plowArea: "", // 新增耕地等级
        newPlowLevelOne: "", // 新增水田面积
        newPlowLevelOneHectare: "", // 垦造水田面积
        newPlowLevelTwo: "", // 旱改水田面积
        newPlowLevelTwoHectare: "", // 新增粮食产能
        newPlowLevelThree: "", // 新增耕地粮食产能
        newPlowLevelThreeHectare: "", // 提质改造粮食产能
        explanation: "" // 简介
      },
      uploadUrl: config.uploadUrl,
      projectId: localStorage.getItem("projectId") || "",
      disabled: true
    };
  },
  created() {
    if (this.$route.name === localStorage.getItem("key")) {
      this.disabled = false;
    }
    if (localStorage.getItem("lookStatus") == 2) {
      this.disabled = true;
    }
    this.getConsultInfo();
  },
  methods: {
    //返回
    back() {
      this.$router.push("/projectManagement/projectImplementation/dealwith");
    },
    //查看当前PDF
    seePdf(num) {
      this.pdfFlag = true;
      this.pdfUrl = this.fileList[num][0].url;
      this.pdfName = this.fileList[num][0].name;
    },
    onSubmit() {
      //提交表单
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      for (const key in this.form) {
        if (
          key !== "unitId" &&
          key !== "projectId" &&
          key !== "projectName" &&
          key !== "implementUnit" &&
          key !== "sourcesFunds" &&
          key !== "frameMap" &&
          key !== "explanation"
        ) {
          this.form[key] = this.form[key] * 1;
        }
      }
      this.form["projectId"] = localStorage.getItem("projectId");
      setAdd(this.form)
        .then(res => {
          loading.close();
          this.$message({
            message: "提交成功！",
            type: "success"
          });
          this.disabled = true;
          this.getConsultInfo();
          this.$router.push(
            "/projectManagement/projectImplementation/dealwith"
          );
        })
        .catch(res => {
          loading.close();
        });
    },
    fileDownload(data, fileName) {
      // 创建隐藏的可下载链接
      var eleLink = document.createElement("a");
      eleLink.download = fileName; // 必须携带格式的名称  比如  app.text 或者 index.html
      eleLink.style.display = "none";
      // 字符内容转变成blob地址
      var blob = new Blob([data]);
      eleLink.href = URL.createObjectURL(blob);
      // 触发点击
      document.body.appendChild(eleLink);
      eleLink.click();
      // 然后移除
      document.body.removeChild(eleLink);
    },
    setDownload() {
      //生成pdf并下载
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      for (const key in this.form) {
        if (
          key !== "unitId" &&
          key !== "projectId" &&
          key !== "projectName" &&
          key !== "implementUnit" &&
          key !== "sourcesFunds" &&
          key !== "frameMap" &&
          key !== "explanation"
        ) {
          this.form[key] = this.form[key] * 1;
        }
      }
      this.form["projectId"] = localStorage.getItem("projectId");
      setDownload(this.form)
        .then(res => {
          loading.close();
          this.fileDownload(res, "合格证.pdf");
        })
        .catch(res => {
          loading.close();
        });
    },
    handleUploadSuccess: function(res, file, fileList) {
      //开发整理合格证上传成功回调
      this.form.unitId = res.data.id;
    },
    getConsultInfo() {
      //获取信息
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getDetail({ projectId: this.projectId })
        .then(res => {
          loading.close();
          if (res.data) {
            this.form = res.data;

            var data = {
              fileId: res.data.unitId
            };
            getFile(data).then(res1 => {
              if (res.data) {
                var fileObj = [{ url: res1.filePath, name: res1.fileName }];
                this.fileList.push(fileObj);
              }
            });
          }
          console.log(res, "详细信息");
        })
        .catch(res => {
          loading.close();
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.cityBureauOpinion {
  padding: 20px;
  min-height: calc(100vh - 154px);
  background-color: #fff;
  .maintitle {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
  }
  .formcontent {
    margin-top: 30px;
  }
}
.titleDeputy {
  padding: 15px 0 0 0;
  font-size: 14px;
  font-family: PingFang SC;
  line-height: 25px;
  color: #8c8c8c;
}
.formAllRow {
  padding: 15px 0;
}
</style>
